<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>配置拓扑图</title>
    <style>
        .left{
            width: 60%;
            float: left;
        }

        .right {
            background: url("source/network00.jpg");
            background-size: 400px 300px;
            background-repeat: no-repeat;
            height: 800px;
            width: 40%;
            float: left;
        }

        .button{
            display: inline-block;
            color: #FFFFFF;
            background-color: #8AC007;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 3px;
            padding-bottom: 4px;
            text-decoration: none;
            margin-left: 5px;
            margin-top: 0px;
            margin-bottom: 5px;
            border: 1px solid #aaaaaa;
            border-radius: 5px;
            white-space: nowrap;
        }
    </style>
</head>
<body>
  <div class="left">
      <form action="" method="post">
          <p>
              <label>路由列表：</label><input type="text" name="routers" value="<?php echo $routers;?>" placeholder="如：R1,R2,R3,R4,R5"/>
          </p>

          <p>
              <label>网络列表：</label><input type="text" name="networks" value="<?php echo $networks;?>" placeholder="如：N1,N2,N3,N4,N5,N6"/>
          </p>
          <br/>
          <p>
              路由连接线: <input type="button" onclick="addLink();" value="添加"/>
          </p>
          <p>
              <div id="links">
                 <table id="tableList">
                     <tr>
                         <th>路由</th> <th>连接路由列表</th> <th>连接网络列表</th>
                     </tr>
                     <?php if($arrayR) {?>
                     <?php foreach($arrayR as $R => $RN){ ?>
                     <tr>
                         <td><input type="text" name="route[]" value="<?php echo $R; ?>" placeholder="如：R1"/> </td>
                         <td><input type="text" name="routeList[]" value="<?php echo $RN['link_routers']; ?>" placeholder="如：R5"/> </td>
                         <td><input type="text" name="networkList[]" value="<?php echo $RN['link_networks']; ?>" placeholder="如：N1,N2"/> </td>
                     </tr>
                     <?php } ?>
                     <?php }else{ ?>
                     <tr>
                         <td><input type="text" name="route[]" value="" placeholder="如：R1"/> </td>
                         <td><input type="text" name="routeList[]" value="" placeholder="如：R5"/> </td>
                         <td><input type="text" name="networkList[]" value="" placeholder="如：N1,N2"/> </td>
                     </tr>
                     <?php } ?>

                 </table>
              </div>
          </p>


          <p style="padding-left:200px">
              <input type="submit" onclick="submit();" value="提交" class="button"/>
              <input type="button" onclick="back();" value="返回" class="button"/>
          </p>
      </form>
  </div>

  <div class="right">
   <p>
       例图：
   </p>
  </div>

</body>

<script>
   //2s刷新一次
   /* setTimeout(function(){
        var url=location.href;
     /*//*   url= url.replace(/\?action=input/i,"");*//**//*
        window.location.href=url;
    },2000);*/

    function addLink(){
        var trD=document.createElement("tr");
        var tdD1=document.createElement("td");
        var tdD2=document.createElement("td");
        var tdD3=document.createElement("td");
        var inputD1=document.createElement("input");
        var inputD2=document.createElement("input");
        var inputD3=document.createElement("input");
        inputD1.type="text";
        inputD1.name="route[]";
        inputD1.value="";
        inputD1.placeholder="如：R1";
        tdD1.appendChild(inputD1);
        trD.appendChild(tdD1);
        inputD2.type="text";
        inputD2.name="routeList[]";
        inputD2.value="";
        inputD2.placeholder="如：R5";
        tdD2.appendChild(inputD2);
        trD.appendChild(tdD2);
        inputD3.type="text";
        inputD3.name="networkList[]";
        inputD3.value="";
        inputD3.placeholder="如：N1,N2";
        tdD3.appendChild(inputD3);
        trD.appendChild(tdD3);

        var divD=document.getElementById("tableList");
        divD.appendChild(trD);
    }


    function go(){
        var dcs=document.getElementsByName("route");
        alert(dcs[0].value);
        alert(dcs[1].value);
    }

    function back(){
        var url=location.href;
        url= url.replace(/\?action=.*/i,"");
        window.location.href=url;
    }
</script>
</html>